<template>
	<view class="page">
		<view class="title">
			3.4.class类和style内联样式的绑定
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://cn.vuejs.org/guide/essentials/class-and-style.html" text="class类和style内联样式的绑定"
				color="#007BFF"></uni-link>
		</view>
		<view class="p">
			一下是实例 注意查看JS的备注
		</view>
		<view class="p">
			<view class="box" :class="{withbg:isActive}" @click="changClass">
				我是box内容
			</view>
		</view>
		<view class="p">
			<view class="box" :class="Active ? 'withbg' : ''" @click="changClass">
				使用表达式方式来控制class是否显示，日常在做tab标签的时候常用
			</view>
		</view>
		<view class="p">
			<view class="box"
				:style="{width:'300px',fontSize:fontsize + 'px',padding:48 + 'rpx',lineHeight: 96 + 'rpx'}">
				内联样式 注意看代码
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	//当isActive为true时候 withbg 就作为class追加到div上面
	const isActive = ref(true)
	//第二个box的值
	const Active = ref(false)
	//点击div改变isActive的值 实现追加和移除class
	const changClass = () => {
		isActive.value = !isActive.value
		Active.value = !Active.value
	}
	//定义字体大小
	const fontsize = ref("36")
</script>

<style lang="scss" scoped>
	.withbg {
		background: #34c759;
		color: #fff;
	}
</style>